<template>
  <section id="comment-info">
      <ma-header :titleName="titleName+'条回复'"></ma-header>
      <comment :isCommentTwo="true" :value="commentData"></comment> 
      <div class="divide"></div>
      <h4 class="discussion">热门讨论</h4>
      <div class="divide"></div>
      <div class="commentList">
          <comment :isCommentTwo="true" :value="commentList" v-on:clickCommen="clickCommen"></comment>
      </div>
      <footer class="footer">
          <input type="text"  @blur="focusState = false" v-focus="focusStatus" v-model="commentContent" placeholder="回复评论">
          <button :class="{active:!isSilent&&isSubmit}" v-tap="{methods:submitComment}">发送</button>
      </footer>
  </section>
</template>
<script>
import maHeader from 'components/magicHeader'
import comment from 'components/comment'
import QuerySpaceComment from 'services/community/QuerySpaceComment'
import CreateSpaceCommentService from "services/community/CreateSpaceComment";
import QueryStore from "services/community/QueryStore";
export default {
  name:'newCommentInfo',
  components: {
    maHeader,
    comment
  },
  data () {
      return {
          id:'',
          titleName:0,
          commentData:[],
          commentList:[],
          commentContent:'',
          isSubmit:false,
          spaceId:'',
          focusStatus:false,
          isSilent:false
      }
  },
  created () {
      this.id = this.$route.params.id
      this.spaceId = this.$route.params.spaceId
      this.getQuerySpaceComment(this.id)
      this.getcommunitySilent()
  },
  directives: {
    focus: {
      update: function (el, {value}) {
        if (value) {
          el.focus()
        }
      }
    }
  },
  watch: {
    commentContent:function(value){
        if(this.$.isEmpty(value)){
            this.isSubmit = false
        }else{
            this.isSubmit = true
        }
    }  
  },
  methods: {
      getcommunitySilent(){
        QueryStore.bind(this)({

        },resp=>{
            console.log(resp.shop.communitySilent)
            this.isSilent = resp.shop.communitySilent === '1'? true : false
        })
      },
      getQuerySpaceComment(id){
          QuerySpaceComment.bind(this)({
              spaceCommentId:id
          },resp=>{
              // 评论详情
              this.commentData=[]
              this.commentData.push(resp.commentData) 
              this.titleName = Number(resp.commentData.commentCount)
              // 二级评论
              this.commentList = resp.commentList
              console.log(this.commentList)
          })
      },
      submitComment() {
          if(this.isSilent){
            this.$.toast('您已被禁言')
            return
        }
          if(!this.isSubmit){
              return
          }
        CreateSpaceCommentService.bind(this)({
            content: this.commentContent,
            spaceCommentId: this.id,
            spaceId:this.spaceId
            },resp => {
                this.getQuerySpaceComment(this.id)
                this.commentContent=''
                this.titleName++
                this.focusStatus = false
            }
        );
    },
    clickCommen(name){
        this.focusStatus = true
        this.commentContent = '回复 '+name+' : '
    }
  }
}
</script>
<style lang="scss">
#comment-info{
    .divide{
      border: none;
      width: 100%;
      height: 8px;
      background-color: rgb(235, 233, 233);
    }
    .discussion{
      line-height: 40px;
      font-size: 16px;
      padding-left: 1em;
    }
    .commentList{
        padding-bottom: 40px;
    }
    .footer{
        background-color: #fff;
        padding: 5px 0;
        display: flex;
        width: 100%;
        position: fixed;
        bottom: 0;
        justify-content:space-around;
        input{
            width: 85%;
            border: none;
            border-radius: 5px;
            border: 1px solid #ddd;
            padding-left: 5px;
        }
        button{
            height: 30px;
            padding:0 5px;
            border: 1px solid #ddd;
            border-radius: 5px;
            &.active{
                background-color: #f98700;
                color: #fff;
            }
        }
    }
}
</style>


